<template>
    <div class="page">
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                    <span class="title">出入历史</span>
                </div>
            </van-nav-bar>
        </div>

        <div class="module-box search">
            <input class="input" type="text" v-model="queryVal" placeholder="请输入业主名称/电话/时间段"/>
            <i class="icon-btn" @click="clickSearch()"></i>

            <van-dropdown-menu class="dropdown-menu" :close-on-click-outside="false">
                <van-dropdown-item ref="date" title="筛选">
                    <div class="choice-date">
                        <div class="choice-date-div">
                            起始时间：<div class="date-box" @click="choiceDate('start')">{{startDate}}</div>
                        </div>
                        <div class="choice-date-div">
                            终止时间：<div class="date-box" @click="choiceDate('end')">{{endDate}}</div>
                        </div>
                        <van-button type="primary" size="small" @click="clickSearch()">确定</van-button>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>

        <!--出入列表-->
        <div class="module-box" v-for="(item,index) in recordData" :key="index">
            <div class="day-title">
                <span class="date">{{item[0].recordTime.slice(0,10)}}</span>

                <div class="time">
                    <!--<i class="clock-icon"></i>-->
                    <!--<span>{{item[0].recordTime.slice(11,19)}}</span>-->
                </div>
            </div>

            <div class="day-item" v-for="(item2,index) in item" :key="index">
                <div class="info-box">
                    <div class="name">{{item2.ownerName}}</div>

                    <!--出入记录-->
                    <div class="out-in" v-if="item2.state=='out'">
                        <i class="icon out-icon"></i>
                        <span>出</span>
                    </div>
                    <div class="out-in" v-if="item2.state=='in'">
                        <i class="icon in-icon"></i>
                        <span>入</span>
                    </div>

                    <!--体温，有三种类型，正常、可疑、发烧-->
                    <div class="temp">
                        <i class="temp-icon"></i>
                        <span>{{item2.temperature}}</span>
                    </div>
                </div>

                <div class="address">{{item2.address}}</div>
            </div>


        </div>

        <!--日期上拉弹框-->
        <van-action-sheet v-model="showDateBox" title="选择日期">
            <van-datetime-picker type="datetime" :min-date="minDate" :max-date="maxDate"
                                 @confirm="dateConfirm" @cancel="dateCancel"/>
        </van-action-sheet>

    </div>
</template>

<script>
    import {NavBar, Button, ActionSheet,DatetimePicker,DropdownMenu,DropdownItem} from 'vant';

    export default {
        name: 'outInHistory',

        components: {
            [NavBar.name]: NavBar,
			[Button.name]: Button,
			[ActionSheet.name]: ActionSheet,
			[DatetimePicker.name]: DatetimePicker,
			[DropdownMenu.name]: DropdownMenu,
			[DropdownItem.name]: DropdownItem,
        },

        props: {},

        data() {
            return {
				queryVal: '',
                recordData:[],

				minDate: new Date(2019, 0, 1),
				maxDate: new Date(2030, 11, 31),
				currentDate: '',
				showDateBox: false,
				startDate: '',
		        endDate: '',
				dateType: '',
            }
        },

        mounted() {
            this.getOutInHistoryData()
        },

        methods: {
			//选择开始/结束时间
			choiceDate(type){
				this.dateType = type;
				this.showDateBox = true;
			},
			dateConfirm(date){
				this.showDateBox = false;
				if(this.dateType == 'start'){
					this.startDate = this.getDateTime(date);
				}else{
					this.endDate = this.getDateTime(date);
				}
			},
			dateCancel(){
				this.showDateBox = false;
			},
//            时间格式转化
            getDateTime(val){
                if(!val) return;
                let newDate = new Date(val),
                    dateYear = newDate.getFullYear(),
                    dateMonth = newDate.getMonth() + 1,
                    dateDay = newDate.getDate(),
                    dateHour = newDate.getHours(),
                    dateMinute = newDate.getMinutes(),
                    dateSecond = newDate.getSeconds(),
                    dateTimeArray = [dateHour,dateMinute,dateSecond],
                    dateArray = [dateYear,dateMonth,dateDay];

                dateArray = dateArray.map(val => {
                    return val > 9 ? val : `0${val}`;
                })
                dateTimeArray = dateTimeArray.map(val => {
                    return val > 9 ? val : `0${val}`;
                })
                return `${dateArray.join('-')} ${dateTimeArray.join(':')}`;
            },

            onClickLeft(){
                this.$router.go(-1);
            },

            //点击搜索按钮
			clickSearch(){
                console.log(isNaN(parseInt(this.queryVal)))
                this.getOutInHistoryData(this.queryVal,this.startDate,this.endDate)
            },
            //获取出入历史数据
            getOutInHistoryData(ownerInfo,startTime,endTime){
			    if(!this.$Cookies.get('communityId')) return false
                let params={}
			    if(!ownerInfo && !startTime && !endTime){
                    params.communityId=this.$Cookies.get('communityId')
                }else{
                    params.communityId=this.$Cookies.get('communityId')
                    if(!isNaN(parseInt(this.queryVal))){
                        params.phoneNumber=ownerInfo
                    }else{
                        params.ownerName=ownerInfo
                    }
                    params.startTime=startTime
                    params.endTime=endTime
                }
                this.$axios.post(this.$api.queryTravelRecord, params).then(success => {
                    if(success.data.code == '200'){
                        this.formatData(success.data.data)
                    }
                }).catch(error => {

                })
            },
            //按天格式化出行记录
            formatData(data){
                this.recordData = [];
                if(data.length == 0){
                    return;
                }

                for(let item of data){
                    if(this.recordData.length == 0){
                        this.recordData.push([item]);

                    }else if(item.recordTime.slice(0,10) == this.recordData[this.recordData.length - 1][0].recordTime.slice(0,10)){
                        this.recordData[this.recordData.length - 1].push(item);

                    }else{
                        this.recordData.push([item]);
                    }
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
     /*搜索框样式*/
    .search{
        position: relative;

        .input{
            width: 80%;
            height: 42px;
            border: none;
            background-color: transparent;
            padding-left: 16px;
            padding-right: 50px;
            font-size: 15px;
            box-sizing: border-box;
        }
        .icon-btn{
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url("../assets/images/search-icon.png") no-repeat;
            background-size: cover;
            position: absolute;
            top: 8px;
            right: 22%;
        }


        /*时间筛选*/
        .dropdown-menu{
            height: 42px;
            float: right;
            margin-right: 20px;
            background-color: transparent;
        }
        /*选择时分样式*/
        .choice-date{
            background-color: white;
            padding: 10px 0;
            text-align: center;
            border-top: solid 1px #ededed;
            .choice-date-div{
                margin-bottom:10px;
                height: 30px;
                line-height: 30px;
            }
            .date-box{
                display: inline-block;
                width: 180px;
                height: 30px;
                line-height: 30px;
                border: solid 1px #ededed;
                border-radius: 4px;
                font-size: 16px;
                color: #999999;
                margin: 0 10px;
                vertical-align: middle;
            }
        }
    }


    .day-title{
        padding: 10px 16px;
        font-size: 16px;
        color: #222222;

        .time{
            float: right;

            .clock-icon{
                display: inline-block;
                width: 15px;
                height: 15px;
                background: url("../assets/images/clock-icon.png") no-repeat;
                background-size: cover;
                vertical-align: middle;
            }
            span{
                vertical-align: middle;
            }
        }
    }

    .day-item{
        padding: 10px 16px;
        border-top: solid 1px #ededed;

        .info-box{
            text-align: center;
            font-size: 18px;
            color: #222222;

            .name{
                float: left;
                width: 80px;
                text-align: left;
                font-weight: bold;
                padding: 4px 0;
            }
            .out-in{
                display: inline-block;
                padding: 4px 0;

                .icon{
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    vertical-align: middle;

                    &.out-icon{
                        background: url("../assets/images/out-icon.png") no-repeat;
                        background-size: cover;
                    }
                    &.in-icon{
                        background: url("../assets/images/in-icon.png") no-repeat;
                        background-size: cover;
                    }
                }
                span{
                    vertical-align: middle;
                }
            }
            .temp{
                float: right;
                width: 80px;
                padding: 4px 4px;
                border-radius: 6px;

                &.yellow{
                    background-color: #ffff00;
                }
                &.red{
                    background-color: #e90b0b;
                    color: white;

                    .temp-icon{
                        background: url("../assets/images/temp-white-icon.png") no-repeat;
                        background-size: cover;
                    }
                }

                .temp-icon{
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    background: url("../assets/images/temp-icon.png") no-repeat;
                    background-size: cover;
                    vertical-align: middle;
                }
                span{
                    vertical-align: middle;
                }
            }
        }

        .address{
            font-size: 15px;
            color: #222222;
            margin-top: 10px;
        }
    }

</style>

